{% load static from staticfiles %}
<!-- script src="{% static "geonode/js/proj4js/proj4.js" %}" type="text/javascript"></script -->
<script src="{% static "geonode/js/ol-2.13/OpenLayers.js" %}" type="text/javascript"></script>
<script src="{% static "geonode/js/ol-2.13/lib/OpenLayers/Layer/ArcGISCache.js" %}" type="text/javascript"></script>

<style>
    .olControlAttribution {
        bottom: 0 !important;
    }
</style>

<script type="text/javascript">

  document.addEventListener("DOMContentLoaded", function(event) {
    var config = {{ config|safe }};
    var model_crs = config['map']['projection'];
    var zoom = {{ map.zoom }};
    var center_x = {{ map.center_x }};
    var center_y = {{ map.center_y }};
    var center = [center_x, center_y];
    var settings_crs = '{{ crs }}';
    if (settings_crs != 'EPSG:4326') {
        settings_crs = 'EPSG:3857';
    }
    if ('EPSG:4326' != model_crs) {
        // if the two crs are not the same, user must have switched default crs for project after map was created
        center = new OpenLayers.LonLat(center).transform(
            new OpenLayers.Projection('EPSG:4326'),
            new OpenLayers.Projection(settings_crs));
    }
    var config_layers = config['map']['layers']
    var layers = [
        new OpenLayers.Layer.OSM("OpenCycleMap",
            ["https://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
            "https://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
            "https://c.tile.openstreetmap.org/${z}/${x}/${y}.png"])
    ];
    {% for layer in layers %}
        {% if layer.ows_url != None and layer.local %}
            var source = new OpenLayers.Layer.WMS(
                "{{ layer.name|safe }}",
                '{{ layer.ows_url|safe }}',
                {layers: '{{ layer.name|safe }}', transparent: true},
                {isBaseLayer: false}
            );
        layers.push(source);
        {% endif %}
    {% endfor %}
    // olMap is used by thumbnail.js to POST to the thumbnail update view
    window.olMap = new OpenLayers.Map({
        div: 'preview_map',
        projection: new OpenLayers.Projection('EPSG:3857'),
        layers: layers,
        center: center,
        zoom: zoom
    });
  });

</script>
